<template>
  <div>
    <nav-bar
      title="大客户管理平台"
      :isShow="false"
      :leftArrow="false"
      leftText=""
    ></nav-bar>

    <van-grid :column-num="nums">
      <van-grid-item
        :class="index == 0 ? activeColor : gridColor"
        replace
        icon="friends-o"
        text="员工查询"
        :to="{ name: 'Employees', params: {groups_id: groups_id} }"
        @click="onClick(0)"
      />
      <van-grid-item
        :class="index == 1 ? activeColor : gridColor"
        replace
        icon="comment-o"
        text="统计查询"
        :to="{ name: 'SearchStats', params: {groups_id: groups_id}}"
        @click="onClick(1)"
      />
      <van-grid-item
        :class="index == 2 ? activeColor : gridColor"
        replace
        icon="clock-o"
        text="日报表"
        :to="{ name: 'DayReport', params: {groups_id: groups_id}}"
        @click="onClick(2)"
      />
      <van-grid-item
        :class="index == 3 ? activeColor : gridColor"
        replace
        icon="records"
        text="月报表"
        :to="{ name: 'MonthReport', params: {groups_id: groups_id} }"
        @click="onClick(3)"
      />
      <van-grid-item
        :class="index == 4 ? activeColor : gridColor"
        replace
        icon="notes-o"
        text="年报表"
        :to="{ name: 'YearReport', params: {groups_id: groups_id} }"
        @click="onClick(4)"
      />
    </van-grid>
    <router-view></router-view>
  </div>
</template>

<script>
import NavBar from "@/components/NavBar";
import { mapGetters } from "vuex";
export default {
  name: "Groups",
  components: {
    NavBar,
  },
  props: {},
  data() {
    return {
      title: this.$route.meta.title,
      index: -1,
      gridColor: "grid-color",
      activeColor: "active-color",
    };
  },

  computed: {
    ...mapGetters(["groups_id"]),
    nums() {
      return 5;
    },
  },
  methods: {
    onClick(index) {
      this.index = index;

    },
  },
  mounted() {
    
  },
};
</script>

<style  scoped>
.grid-color {
  color: #1989fa;
}
.active-color {
  color: #ee0a24;
}
</style>